<template>
  <div>
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-select v-model="bjxxQuery.xymc" clearable placeholder="学院" @change = "getbj(bjxxQuery.xymc)">
            <el-option 
            v-for = "(xym,index) in xyList" :key="index" :label="xym" :value="xym" />
        </el-select>
      </el-form-item>
  
      <el-form-item>
        <el-select v-model="bjxxQuery.bjmc" clearable placeholder="班级">
           <el-option 
            v-for = "(bj,index) in bjList" :key="index" :label="bj" :value="bj" />
        </el-select>
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="getF1013List()">查询</el-button>
      <el-button type="default" @click="clear()">清空</el-button>
      <el-button type="primary" @click="exportExcel()">导出</el-button>

    </el-form>


    

  <!--数据列表-->
    <el-table
    :data="F1013List"
    border
    style="width: 100%">
    <el-table-column
      prop="xy"
      label="学院"
      width="180">
    </el-table-column>

    <el-table-column
      prop="bh"
      label="班级"
      width="180">
    </el-table-column>

    <el-table-column
       prop="xh"
      label="学号"
      width="180">
    </el-table-column>

    <el-table-column
       prop="xm"
      label="姓名"
      width="180">
    </el-table-column>

      <el-table-column
       prop="bjg"
      label="历年不及格"
      width="180">
    </el-table-column>

  </el-table>

  </div>

</template>

<script>
import bjxxapi from '@/api/bjxx.js'
import fileDownload from 'js-file-download'
import stapi from '@/api/statistic.js'

  export default {
    data() {
      return {
      xyList:{},
      bjList:{},
      F1013List:null,
       page:1,
       limit:20,
       total:0,
       bjxxQuery:{},
       exportQuery:{},
       BASE_API: process.env.BASE_API, // 接口API地址
       loading: false,
      }
    },

    created(){
      this.getF1013List()
      this.getxy()
    },

    methods:{
  


    getF1013List(){
        stapi.getF1013List(this.bjxxQuery).then(response=>{
            this.F1013List = response.data.list
            //查询之后更新导出的数据为所查询数据
              this.exportQuery = this.bjxxQuery
        })
    
    },
    
    getxy(){
        bjxxapi.getXy().then(response=>{
          this.xyList = response.data.xylist
        })
      },

      getbj(xym){
        bjxxapi.getBjByXy(xym).then(response=>{
            this.bjList = response.data.bjList
        })
      },

      clear(){
          this.bjxxQuery = {}
          this.getF1013List()
      },

      exportExcel(){
        stapi.exportF1013List(this.exportQuery).then((res)=>{
            fileDownload(res, '结业生列表.xlsx')
          });
      },

    }


  }
</script>